<html>
    <head>
        <title>Cloud Watch</title>
        <style>
        body{
            margin:0px;
            padding:0px;
        }
        </style>
          <script type="application/x-javascript" src="chrome://ec2ui/content/sha1.js" />
  <script type="application/x-javascript" src="chrome://ec2ui/content/base64.js" />
  <script type="application/x-javascript" src="chrome://ec2ui/content/rsahelper.js" />
  <script type="application/x-javascript" src="chrome://ec2ui/content/rsa.js" />
  <script type="application/x-javascript" src="chrome://ec2ui/content/rsa2.js" />
  <script type="application/x-javascript" src="chrome://ec2ui/content/jsbn.js" />
  <script type="application/x-javascript" src="chrome://ec2ui/content/jsbn2.js" />

  <script type="application/x-javascript" src="chrome://ec2ui/content/utils.js" />
  <script type="application/x-javascript" src="chrome://ec2ui/content/io.js" />
  <script type="application/x-javascript" src="chrome://ec2ui/content/strftime.js" />
  <script type="application/x-javascript" src="chrome://ec2ui/content/model.js" />
  <script type="application/x-javascript" src="chrome://ec2ui/content/client.js" />
  <script type="application/x-javascript" src="chrome://ec2ui/content/keypairview.js" />
  <script type="application/x-javascript" src="chrome://ec2ui/content/instancesview.js" />
  <script type="application/x-javascript" src="chrome://ec2ui/content/securitygroupsview.js" />
  <script type="application/x-javascript" src="chrome://ec2ui/content/permissionsview.js" />
  <script type="application/x-javascript" src="chrome://ec2ui/content/azoneview.js" />
  <script type="application/x-javascript" src="chrome://ec2ui/content/eipview.js" />
  <script type="application/x-javascript" src="chrome://ec2ui/content/newpermissionauthorizer.js" />

  <script type="application/x-javascript" src="chrome://ec2ui/content/preferences.js" />
  <script type="application/x-javascript" src="chrome://ec2ui/content/baseimagesview.js" />
  <script type="application/x-javascript" src="chrome://ec2ui/content/amisview.js" />
  <script type="application/x-javascript" src="chrome://ec2ui/content/volumesview.js" />
  <script type="application/x-javascript" src="chrome://ec2ui/content/snapshotsview.js" />
  <script type="application/x-javascript" src="chrome://ec2ui/content/leaseofferingsview.js" />
  <script type="application/x-javascript" src="chrome://ec2ui/content/reservedinstancesview.js" />
  <script type="application/x-javascript" src="chrome://ec2ui/content/bundletasksview.js" />
  <script type="application/x-javascript" src="chrome://ec2ui/content/controller.js" />
  <script type="application/x-javascript" src="chrome://ec2ui/content/accountid_manager.js" />
  <script type="application/x-javascript" src="chrome://ec2ui/content/tools_manager.js" />
  <script type="application/x-javascript" src="chrome://ec2ui/content/credential_manager.js" />
  <script type="application/x-javascript" src="chrome://global/content/contentAreaUtils.js" />
  <script type="application/x-javascript" src="chrome://ec2ui/content/session.js" />
  <script type="application/x-javascript" src="chrome://ec2ui/content/monitoringview.js" />
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
       
        <script type="text/javascript">
        google.load("visualization", "1", {packages:["corechart"]});
        google.setOnLoadCallback(drawChart);
        function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Year');
        data.addColumn('number', 'Sales');
        data.addRows(4);
        data.setValue(0, 0, '2004');
        data.setValue(0, 1, 1000);
        data.setValue(1, 0, '2005');
        data.setValue(1, 1, 1170);
        data.setValue(2, 0, '2006');
        data.setValue(2, 1, 860);
        data.setValue(3, 0, '2007');
        data.setValue(3, 1, 1030);
        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, title: 'CPUUtilization'});
        var chart1 = new google.visualization.LineChart(document.getElementById('chart_div1'));
        chart1.draw(data, {width: 400, height: 240, title: 'DiskReadOps'});
        var chart2 = new google.visualization.LineChart(document.getElementById('chart_div2'));
        chart2.draw(data, {width: 400, height: 240, title: 'DiskWriteOps'});
        var chart3 = new google.visualization.LineChart(document.getElementById('chart_div3'));
        chart3.draw(data, {width: 400, height: 240, title: 'NetworkIn'});
        var chart4 = new google.visualization.LineChart(document.getElementById('chart_div4'));
        chart4.draw(data, {width: 400, height: 240, title: 'NetworkOut'});
      }
    </script>
    </head>
    <body>
        <table width="100%" border="0">
  <tr>
    <td><div id="chart_div" onmouseover="ec2ui_MonitoringTreeView.sample()"></div></td>
    <td><div id="chart_div1"></div></td>
    <td> <div id="chart_div2"></div></td>
  </tr>
  <tr>
    <td><div id="chart_div3"></div></td>
    <td><div id="chart_div4"></div></td>
    <td> <div id="sampletext">Sample</div></td>
  </tr>
</table>
    </body>
</html>